<template>
  <div class="page-container">
    <div class="page-header">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item to="/">首页</el-breadcrumb-item>
        <el-breadcrumb-item>宣传材料</el-breadcrumb-item>
      </el-breadcrumb>
      
      <div class="header-title">
        <h1>
          <el-icon class="title-icon"><Promotion /></el-icon>
          宣传材料生成
        </h1>
        <p class="subtitle">专业的宣传材料生成工具，规范流程，高质量输出</p>
      </div>
    </div>

    <div class="category-section">
      <h2 class="section-title">选择宣传类型</h2>
      
      <el-row justify="center">
        <el-col :span="12">
          <el-card class="category-card" @click="selectCategory('新闻稿')">
            <div class="category-content">
              <div class="category-icon">
                <el-icon size="50"><Newspaper /></el-icon>
              </div>
              <div class="category-info">
                <h3>新闻稿</h3>
                <p>各类新闻稿件撰写，包括活动报道、工作动态、成果宣传等内容的专业写作</p>
                <div class="category-tags">
                  <el-tag type="primary" effect="plain" size="small">活动报道</el-tag>
                  <el-tag type="success" effect="plain" size="small">工作动态</el-tag>
                  <el-tag type="warning" effect="plain" size="small">成果宣传</el-tag>
                  <el-tag type="info" effect="plain" size="small">事件通报</el-tag>
                </div>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>

    <div class="placeholder-section" v-if="selectedCategory">
      <el-card class="placeholder-card">
        <template #header>
          <div class="card-header">
            <el-icon><EditPen /></el-icon>
            <span>{{ selectedCategory }}生成</span>
          </div>
        </template>
        
        <div class="placeholder-content">
          <el-empty description="功能开发中，敬请期待">
            <template #image>
              <el-icon size="80" color="#ddd"><Tools /></el-icon>
            </template>
            <template #description>
              <p>{{ selectedCategory }}生成功能正在开发中</p>
              <p>即将为您提供专业的{{ selectedCategory }}写作服务</p>
            </template>
          </el-empty>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'

const selectedCategory = ref('')
const router = useRouter()

const selectCategory = (category: string) => {
  selectedCategory.value = category
  // 根据选择的类型导航到对应的子页面
  const routeMap: Record<string, string> = {
    '新闻稿': '/publicity/news'
  }
  
  const route = routeMap[category]
  if (route) {
    router.push(route)
  }
}
</script>

<style scoped>
.page-container {
  padding: 20px;
  max-width: 1400px;
  margin: 0 auto;
  min-height: calc(100vh - 40px);
}

.page-header {
  margin-bottom: 30px;
}

.header-title {
  margin-top: 16px;
  text-align: center;
}

.header-title h1 {
  color: #dc3545;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-size: 28px;
  font-weight: 600;
}

.title-icon {
  font-size: 32px;
}

.subtitle {
  color: #666;
  margin: 12px 0 0 0;
  font-size: 16px;
}

.category-section {
  margin-bottom: 40px;
}

.section-title {
  text-align: center;
  font-size: 24px;
  color: #333;
  margin-bottom: 30px;
  font-weight: 600;
}

.category-card {
  cursor: pointer;
  transition: all 0.3s ease;
  border: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  min-height: 320px;
}

.category-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
  border-left: 4px solid #dc3545;
}

.category-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 40px 30px;
  height: 100%;
}

.category-icon {
  color: #dc3545;
  margin-bottom: 24px;
}

.category-info {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.category-info h3 {
  font-size: 24px;
  color: #333;
  margin-bottom: 16px;
  font-weight: 600;
}

.category-info p {
  color: #666;
  line-height: 1.6;
  margin-bottom: 24px;
  flex: 1;
  font-size: 16px;
}

.category-tags {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
}

.placeholder-section {
  animation: fadeIn 0.3s ease-in;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.placeholder-card {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  border: none;
  border-radius: 12px;
}

.card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 16px;
}

.placeholder-content {
  padding: 60px 20px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .page-container {
    padding: 15px;
  }
  
  .header-title h1 {
    font-size: 24px;
    flex-direction: column;
    gap: 8px;
  }
  
  .category-card {
    margin-bottom: 20px;
    min-height: auto;
  }
  
  .category-content {
    padding: 30px 20px;
  }
}
</style>